import React, { Component } from 'react'
import { Image ,Button } from 'react-vant';
import * as action from "../api/index"
import {bindActionCreators} from "redux"
import {connect} from "react-redux"
import {
    LeftOutlined
  } from '@ant-design/icons'
import {debounce,throttle} from "lodash"
export class Detail extends Component {
    gotoBack(){
        this.props.history.go(-1)
    }
    addShopCar(item){
        console.log("debounce");
        this.props.addShopCar(item)
    }
    gotoShopCar(){
        this.props.history.push("/index/shopCar")
    }
    render() {
        console.log("detail",this.props);
        let {state} =this.props.location
        return (
            <div className="detail">
                <LeftOutlined className="icon" onClick={this.gotoBack.bind(this)}/> Detail
                <Image lazyload width="100" height="100" src={state.img} />
                    <div >
                        <p>name: {state.name}</p>
                        <p>price: {state.price}</p>
                        <Button type="info" onClick={debounce(this.addShopCar.bind(this,state),3000) }>添加购物车</Button>
                        <Button type="danger" onClick={this.gotoShopCar.bind(this,state)}>去购物车页面</Button>
                    </div>
            </div>
        )
    }
}
const mapState = (state) =>{
    return {
        ...state.reduce
    }
}
export default connect(mapState,(dispatch)=>bindActionCreators(action,dispatch))(Detail)
